<template>
  <div class="user-listdialog">
    <el-dialog :title="text_Tit" :visible.sync="newModalToggle" width="50%" :before-close="userClose">
      <div class="user-content">
        <el-tabs v-model="tabToggle" type="card">
          <el-tab-pane label="登录信息" name="first">
            <el-form :inline="true" class="demo-form-inline" :model="userData" ref="userForm" :rules="rulesUser">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-row :gutter="20" style="margin:0 0 10px 0">
                    <el-col :span="7" style="padding:0">
                      <span class="red">*</span>
                      <span>昵称：</span>
                    </el-col>
                    <el-col :span="17" style="padding:0">
                      <el-form-item prop="userName">
                        <el-input v-model.trim="userData.userName"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row :gutter="20" style="margin:0 0 10px 0">
                    <el-col :span="7" style="padding:0">
                      <span class="red">*</span>
                      <span>账号：</span>
                    </el-col>
                    <el-col :span="17" style="padding:0">
                      <el-form-item prop="account">
                        <el-input v-model.trim="userData.account"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-row :gutter="20" style="margin:0 0 10px 0">
                    <el-col :span="7" style="padding:0">
                      <span class="red">*</span>
                      <span>密码：</span>
                    </el-col>
                    <el-col :span="17" style="padding:0">
                      <el-form-item prop="password">
                        <el-input type="password" v-model.trim="userData.password"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>

                <el-col :span="12">
                  <el-row :gutter="20" style="margin:0 0 10px 0">
                    <el-col :span="7" style="padding:0">
                      <span class="red">*</span>
                      <span>管理员：</span>
                    </el-col>
                    <el-col :span="17" style="padding:0">
                      <el-form-item prop="superadmin">
                        <el-select v-model="userData.superadmin" placeholder="请选择">
                          <el-option v-for="(item, index) in typeoptions" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="userbtn_save">保 存</el-button>
        <el-button @click="btn_cancel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import { mapState } from "vuex"; // , Store
import { getDicTab } from "@/utils/config"; //  doCreate,
import { updateUser } from "@/api/share/user";
import { validPassword } from "@/utils/validate";
export default {
  data() {
    const PassWord = (rule, value, callback) => {
      if (!value) {
        callback(new Error("不能为空"));
      } else if (!validPassword(value)) {
        callback(new Error("密码由6-20字母和数字组成"));
      } else {
        callback();
      }
    };
    return {
      addSign: false,
      newModalToggle: false,
      tabToggle: "",
      text_Tit: "",
      model_Tit: "",
      typeoptions: [
        { label: "否", value: "0" },
        { label: "是", value: "1" }
      ],
      rulesUser: {
        userName: [{ required: true, message: "不能为空" }],
        account: [{ required: true, message: "不能为空" }],
        password: [{ required: true, validator: PassWord, trigger: "blur" }],
        superadmin: [{ required: true, message: "不能为空" }]
      }
    };
  },
  props: {
    newModal: Boolean,
    activeTab: {
      default: "first"
    },
    textTit: {
      default: ""
    },
    userData: {
      default: () => {}
    }
  },
  computed: {
    ...mapState(["user"])
  },
  methods: {
    remarkDic(row) {
      return getDicTab("remark", row);
    },
    remarkHq(row) {
      // eslint-disable-next-line eqeqeq
      if (row.search("_") != -1) {
        return row.split("_")[0];
      }
      return row;
    },
    btn_cancel() {
      this.newModalToggle = false;
      this.$emit("newToggle", this.newModalToggle);
    },
    userClose() {
      this.btn_cancel();
    },
    userbtn_save() {
      let that = this;
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          // that.userData.cjr = that.$store.state.user.nickname
          let obj = Object.assign({}, this.userData);
          let url = that.textTit === "修改" ? "/updateUser" : "/createUser";
          updateUser(obj, url).then((res) => {
            let data = res.data;
            if (data.msg === "success") {
              that.btn_cancel();
              that.$message({
                message: data.msg,
                type: "success"
              });
              that.$emit("addevent", Math.random());
            } else {
              that.$message({
                message: data.msg,
                type: "error"
              });
            }
          });
        }
      });
    }
  },
  watch: {
    newModal(val) {
      this.newModalToggle = val;
      this.tabToggle = this.activeTab;
      this.text_Tit = this.textTit;
      if (this.$refs.userForm) {
        this.$refs.userForm.resetFields();
      }
    },
    userData(val) {
      if (!(JSON.stringify(val) === "{}")) {
        // 编辑
        this.addSign = true;
      } else {
        // 新建
        this.addSign = false;
        if (this.$refs.userForm) {
          this.$refs.userForm.resetFields();
        }
      }
    }
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.user-listdialog {
  .user-content {
    border-bottom: 1px dashed #ccc;
    padding-bottom: 20px;
  }
}
</style>


<style lang="scss">
.user-listdialog {
  .el-dialog__body {
    padding: 20px 20px 0 20px;
  }
  .user-content {
    .el-input__inner {
      border-radius: 0;
    }
    .el-select {
      width: 100%;
    }
    .el-date-editor {
      width: 100%;
    }
    .el-button {
      height: 40px;
      margin: 0 5px;
    }
  }
  .el-dialog__footer {
    text-align: center;
  }
  .el-form-item {
    width: 100%;
    margin-bottom: 0;
    & > div {
      width: 100%;
    }
  }
}
</style>

